<template>
  <div class="header">
    <!-- 顶部导航条 -->
    <div class="nav-topbar">
      <div class="container">
        <div class="top-menu">
          <a href="javascript:;">小米商城</a>
          <a href="javascript:;">MUI</a>
          <a href="javascript:;">云服务</a>
          <a href="javascript:;">协议规则</a>
        </div>
        <div class="top-user">
          <a href="javascript:;" v-if="username">{{ username }}</a>
          <a href="javascript:;" v-if="!username" @click="goToLogin">登陆</a>
          <a href="javascript:;" v-if="!username" @click="goReguster">注册</a>
          <a href="javascript:;" v-if="username" @click="logout">退出</a>
          <a href="javascript:;" v-if="username" @click="goToOrder">我的订单</a>
          <a href="javascript:;" class="my-cart" @click="goToCart"
            ><span class="icon-cart"></span>购物车({{cartCount}})</a
          >
        </div>
      </div>
    </div>
    <!-- 底部导航栏 -->
    <div class="nav-header">
      <div class="container">
        <div class="header-logo">
          <a href="/#/index"></a>
        </div>
        <div class="header-menu">
          <div class="item-menu">
            <span>小米手机</span>
            <div class="children">
              <ul>
                <li class="product" v-for="item in phoneList" :key="item.id">
                  <a :href="'/#/product/' + item.id" target="_blank">
                    <div class="pro-img">
                      <img v-lazy="item.mainImage" alt="" />
                    </div>
                    <div class="pro-name">{{ item.name }}</div>
                    <div class="pro-price">
                      {{ item.price | formatterPrice }}
                    </div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <div class="item-menu"><span>RedMi红米</span></div>
          <div class="item-menu">
            <span>电视</span>
            <div class="children">
              <ul>
                <li class="product">
                  <a href="" target="_blank">
                    <div class="pro-img">
                      <img v-lazy="'/imgs/nav-img/nav-3-1.jpg'" alt="" />
                    </div>
                    <div class="pro-name">小米壁画电视 65英寸</div>
                    <div class="pro-price">6999元</div>
                  </a>
                </li>
                <li class="product">
                  <a href="" target="_blank">
                    <div class="pro-img">
                      <img v-lazy="'/imgs/nav-img/nav-3-2.jpg'" alt="" />
                    </div>
                    <div class="pro-name">小米全面屏电视E55A</div>
                    <div class="pro-price">1999元</div>
                  </a>
                </li>
                <li class="product">
                  <a href="" target="_blank">
                    <div class="pro-img">
                      <img v-lazy="'/imgs/nav-img/nav-3-3.png'" alt="" />
                    </div>
                    <div class="pro-name">小米电视4A 32英寸</div>
                    <div class="pro-price">699元</div>
                  </a>
                </li>
                <li class="product">
                  <a href="" target="_blank">
                    <div class="pro-img">
                      <img v-lazy="'/imgs/nav-img/nav-3-4.jpg'" alt="" />
                    </div>
                    <div class="pro-name">小米电视4A 55英寸</div>
                    <div class="pro-price">1799元</div>
                  </a>
                </li>
                <li class="product">
                  <a href="" target="_blank">
                    <div class="pro-img">
                      <img v-lazy="'/imgs/nav-img/nav-3-5.jpg'" alt="" />
                    </div>
                    <div class="pro-name">小米电视4A 65英寸</div>
                    <div class="pro-price">2699元</div>
                  </a>
                </li>
                <li class="product">
                  <a href="" target="_blank">
                    <div class="pro-img">
                      <img v-lazy="'/imgs/nav-img/nav-3-6.png'" alt="" />
                    </div>
                    <div class="pro-name">查看全部</div>
                    <div class="pro-price">查看全部</div>
                  </a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="header-search">
          <div class="wrapper">
            <input type="text" name="keyword" />
            <a href="javascript:;"></a>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { mapState } from 'vuex'
export default {
  name: 'nav-header',
  data () {
    return {
      phoneList: [],
      username: '',
      cartCount: 0
    }
  },
  filters: {
    FormatterPrice (val) {
      if (!val) {
        return '0.00￥'
      }
      return val + '.00￥'
    }
  },
  computed: {
    // ...mapState(['username'])
  },
  mounted () {
    this.getPhoneList()
    // 获取用户名
    this.getUsername()
  },
  methods: {
    // 获取手机下拉列表数据
    async getPhoneList () {
      const res = await this.$axios.get('/products', {
        params: {
          categoryId: '100012'
        }
      })
      if (res.data.list.length > 6) {
        // 如果返回的数据大于6就截取六条数据
        this.phoneList = res.data.list.slice(0, 6)
        return
      }
      this.phoneList = res.list
    },
    goToCart () {
      this.$router.push('/cart')
    },
    goToLogin () {
      this.$router.push('/login')
    },
    // 获取cookies中的用户名
    getUsername () {
      this.username = this.$cookies.get('username') || ''
      this.cartCount = this.$cookies.get('cartCount') || 0
    },
    logout () {
      this.$axios.post('/user/logout').then(res => {
        if (res.status !== 0) {
          // 退出失败
          return this.$msg.error('退出失败')
        }
        this.$msg.success('退出成功')
        // 清除cookie
        this.$cookies.remove('username')
        this.$cookies.remove('userId')
        this.$cookies.remove('cartCount')
        location.href = '/'
      })
    },
    goReguster () {
      this.$router.push('/register')
    },
    goToOrder () {
      this.$router.push('/order')
    }
  }
}
</script>

<style lang="scss">
@import './../assets/scss/base.scss';
@import './../assets/scss/mixin.scss';
@import './../assets/scss/config.scss';
@import './../assets/scss/header.scss';
</style>
